<template>
  <div class="aboutBox" v-loading="loading">
    <div class="about">
      <div class="left">
        <el-row :gutter="24">
          <!-- <el-col :span="12">
          <el-card shadow="always" class="box-card">
            <div class="name">客户</div>
            <el-button type="success" round>添加客户</el-button>
            <el-button type="success" round>添加拜访记录</el-button>
            <el-button type="primary" round>添加报表</el-button>
            <el-button type="primary" round>我是按钮</el-button>
          </el-card>

        </el-col> -->
          <el-col :span="12">
            <el-card shadow="always" class="box-card">
              <div>
                <el-statistic :title="ban.name">
                  <template slot="formatter"> {{ ban.value }}件 </template>
                </el-statistic>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="always" class="box-card">
              <div>
                <el-statistic :title="ban2.name">
                  <template slot="formatter"> {{ ban2.value }}件 </template>
                </el-statistic>
              </div>
            </el-card>
          </el-col>

        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-card shadow="always">
              <div style="text-align: left;padding: 20px 0 30px 0;">{{ this.mingcheng }}专利状态</div>
              <div class="ban3Box">
                <div v-for="(item, index) in ban3" :key="index">
                  <el-statistic :title="item.name">
                    <template slot="formatter"> {{ item.value }}件 </template>
                  </el-statistic>
                </div>
              </div>

            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-card shadow="always">
              <div class="echart" id="mychart" :style="myChartStyle"></div>

            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="always">

              <div id="pieChart" :style="myChartStyle"></div>

            </el-card>
          </el-col>
        </el-row>


        <el-row :gutter="24">
          <el-col :span="12">
            <el-card shadow="always">
              <div class="echart" id="shadowChart1" :style="myChartStyle"></div>

            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="always">

              <div class="echart" id="shadowChart2" :style="myChartStyle"></div>

            </el-card>
          </el-col>
        </el-row>


        <!-- <el-row :gutter="24">
        <el-col :span="24">
          <el-card shadow="always">
            <div>
              <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">

                <el-table-column prop="applicant" label="第一申请人" width="480">
                </el-table-column>
                <el-table-column prop="agency" label="代理机构">
                </el-table-column>
                <el-table-column prop="count" label="记录数量">
                </el-table-column>
              </el-table>
              <div style="text-align: right; margin-top: 20px;">

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize"
                  layout="total, prev, pager, next, sizes" :total="total">
                </el-pagination>
              </div>

            </div>
          </el-card>
        </el-col>

      </el-row> -->
      </div>
      <div class="right">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-card shadow="always">
              <div class="right_top">
                <img :src="this.picurl" alt="">
              </div>
              <div class="br"></div>
              <div style="text-align: left;">
                <span style="font-size: 18px;">常用链接</span>
                <ul>
                  <li><a :href="this.linkurl" target="_blank">{{ this.userInfo.danwei }}</a> </li>
                  <!-- <li>首都医科大学</li> -->
                  <li><a href="https://cponline.cnipa.gov.cn/" target="_blank">国家知识产权局</a></li>
                </ul>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-card shadow="always">
              <div id="pieChart2" :style="myChartStyle"></div>
            </el-card>
          </el-col>
        </el-row>


        <el-row :gutter="24">
          <el-col :span="24">
            <el-card shadow="always" style="height: 300px; ">
              <div style="text-align:left; color: #000; fontWeight: bold;fontSize: 14px ">{{ this.mingcheng }}发明人词云
              </div>
              <!-- <div v-if="textList.length > 0">
                <JWordCloud :textList="textList"></JWordCloud>
              </div> -->
              <JWordCloud :word="word"></JWordCloud>
            </el-card>
          </el-col>
        </el-row>
      </div>


    </div>
    <div class="bottom">
      <el-row :gutter="24">
        <el-col :span="6" v-for="(item, index) in ban4" :key="index">
          <div @click="statistics(item.name)">

            <el-statistic :title="item.name">
              <template slot="formatter"> {{ item.value }}件 </template>
            </el-statistic>
          </div>

        </el-col>

      </el-row>
    </div>

    <!-- 查看详情 -->
    <el-dialog :span="24" :visible.sync="rowVisible" title="" width="70%">
      <el-table :data="rowTableData" border style="width: 100%" height="450" align="center">
        <!-- <el-table-column type="index" width="50" center>
        </el-table-column> -->
        <el-table-column fixed prop="gk_gg_h" label="公开公告号" width="180">
        </el-table-column>
        <el-table-column prop="zlsqh" label="专利申请号" width="180">
        </el-table-column>
        <el-table-column prop="zlmc" label="专利名称" width="180">
        </el-table-column>
        <el-table-column prop="zlfyzl" label="专利费用种类" width="180">
        </el-table-column>
        <el-table-column prop="famingren" label="发明人" width="180">
        </el-table-column>
        <el-table-column prop="gfjx" align="left" label="缴费截止日" width="180">
        </el-table-column>

        <el-table-column prop="yjje" label="应缴金额" width="120">
        </el-table-column>
        <el-table-column prop="znje" label="滞纳金额" width="120">
        </el-table-column>
        <el-table-column prop="nfzje" label="总金额" width="180">
        </el-table-column>
      </el-table>

      <div style="text-align: right; margin-top: 20px;">

        <el-pagination @size-change="jfSizeChange" @current-change="jfCurrentChange" :current-page="jfCurrentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="jfSize" layout="total, prev, pager, next, sizes"
          :total="jfTotal">
        </el-pagination>
      </div>

    </el-dialog>

    <!-- 条形图详情 -->
    <el-dialog :span="24" :visible.sync="barTypeShow" title="" width="60%">
      <el-table :data="barTableData" border style="width: 100%" height="450" align="center">
        <el-table-column fixed prop="gk_gg_h" label="公开公告号" width="180">
        </el-table-column>
        <el-table-column prop="zlsqh" label="专利申请号" width="180">
        </el-table-column>
        <el-table-column prop="bt_zw_" label="专利名称" width="180">
        </el-table-column>
        <el-table-column prop="famingren" label="发明人" width="180">
        </el-table-column>
        <el-table-column prop="shenqingri" label="申请日" width="180">
        </el-table-column>
        <el-table-column prop="fenji" label="分级" width="180">
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px;">
        <el-pagination @size-change="barSizeChange" @current-change="barCurrentChange" :current-page="barCurrentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="barSize" layout="total, prev, pager, next, sizes"
          :total="barTotal">
        </el-pagination>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts";
import JWordCloud from '@/components/JWordCloud.vue'
import Cookies from "js-cookie";
export default {
  components: {
    JWordCloud
  },
  data() {
    return {
      mingcheng: '',
      picurl: '',
      linkurl: '',
      userInfo: {},
      myChart: {},
      myChartStyle: { float: "left", width: "100%", height: "300px", }, //图表样式
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      categories: ["A", "B", "C", "D", "E"],
      colors: ['#6ab7f4', '#56bab0', '#ffbb56', '#e67a7a', '#9a7cd0'],
      barSeries: [],
      ban: {},
      ban2: {},
      ban3: {},
      ban4: [],
      word: [
        // { name: "单词", freq: 10 },
        // { name: "单词1", freq: 5 },
        // { name: "单词2", freq: 7 },
        // { name: "单词3", freq: 2 },
        // { name: "单词5", freq: 3 },
        // { name: "单词6", freq: 4 },
        // { name: "单词7", freq: 5 },
        // { name: "单词8", freq: 6 },
        // { name: "单词9", freq: 6 },
        // { name: "单词10", freq: 8 },
        // { name: "单词11", freq: 4 },
        // { name: "单词12", freq: 2 },
        // { name: "单词13", freq: 4 },
        // { name: "单词14", freq: 3 },
        // { name: "单词15", freq: 1 },
        // { name: "单词16", freq: 5 }
      ],
      loading: false,
      rowVisible: false,
      rowTableData: [],
      barTypeShow: false,
      barTableData: [],

      jfName: '',
      jfSize:20,
      jfCurrentPage:1,
      jfTotal:0,

      fenjiName:'',
      barSize:20,
      barCurrentPage:1,
      barTotal:0,
    }
  },
  created() {

  },
  mounted() {
    this.getCookie()
    this.report()
    // this.getReport()
  },
  methods: {
    getCookie() {
      this.userInfo = JSON.parse(Cookies.get("userInfo"));
      if (this.userInfo.danwei == '首都医科大学附属北京安贞医院') {
        this.linkurl = 'https://www.anzhen.org/'
        this.mingcheng = '北京安贞医院'
        this.picurl = require('@/assets/azyy.png')
      } else if (this.userInfo.danwei == '首都医科大学附属北京儿童医院') {
        this.linkurl = 'https://www.bch.com.cn/'
        this.mingcheng = '儿童医院'
        this.picurl = require('@/assets/client.png')
      } else if (this.userInfo.danwei == '中日友好医院') {
        this.mingcheng = '中日友好医院'
        this.linkurl = 'https://www.zryhyy.com.cn/'
        this.picurl = require('@/assets/zryh.png')
      } else if (this.userInfo.danwei == '北京大学第一医院') {
        this.mingcheng = '北京大学第一医院'
        this.picurl = require('@/assets/bddy.jpg')
        this.linkurl = 'https://www.pkufh.com/'
      }
    },
    //柱状图
    initEcharts() {
      var that = this

      const option = {
        title: {
          text: '专利分级',
          top: "3%",
          left: "2%",
          textStyle: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 14
          }
        },
        color: that.colors,
        legend: {
          orient: "horizontal",
          top: "3%",
          x: "20%",
          y: "center",
          itemWidth: 10,
          itemHeight: 10,
          data: that.categories,
          textStyle: {
            fontSize: 10,//字体大小
            color: '#a9a9a9'//字体颜色
          }
        },

        grid: {
          top: '15%',
          left: '0%',
          right: '0%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            // textStyle: {
            //   fontSize: 10,//字体大小
            //   color: '#a9a9a9'
            // },
            alignWithLabel: true
          },
          data: that.categories
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#a9a9a9'
            }
          }
        },

        series: that.barSeries
      }

      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on('click', function (params) {
        that.fenjiName = params.name
        that.barCurrentPage = 1
        that.getStatistics(params.name)
      })
    },

    //饼图
    getOption() {
      const pieOption = {
        title: {
          text: '专利类型概况',
          top: "3%",
          left: "2%",
          textStyle: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 10,
        //   data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        // },
        series: [
          {
            name: '',//饼图名称
            type: 'pie',
            radius: ['40%', '60%'],
            textStyle: {
              color: "#999",
              fontSize: "12px"
            },
            // avoidLabelOverlap: false,
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            emphasis: {

              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter(param) {
                // correct the percentage
                return param.name + ' (' + param.percent + '%)';
              }
            },
            // labelLine: {
            //   show: false
            // },
            // data: [
            //   { value: 886, name: '发明授权' },
            //   { value: 2425, name: '发明申请' },
            //   { value: 118, name: '外观设计' },
            //   { value: 4223, name: '实用新型' }
            // ]
            data: this.pieSeries
          }
        ]
      }
      const pieChart = echarts.init(document.getElementById("pieChart"));
      pieChart.setOption(pieOption);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        pieChart.resize();
      });

    },

    getOptionTwo() {
      const pieOption = {
        title: {
          text: '全国儿童医院专利类型',
          top: "3%",
          left: "2%",
          textStyle: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 10,
        //   data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        // },
        series: [
          {
            name: '',//饼图名称
            type: 'pie',
            // radius: ['50%', '70%'],
            radius: ['40%', '60%'],
            textStyle: {
              color: "#999",
              fontSize: "12px"
            },
            // avoidLabelOverlap: false,
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            emphasis: {

              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter(param) {
                // correct the percentage
                return param.name + ' (' + param.percent + '%)';
              }
            },
            // labelLine: {
            //   show: false
            // },
            // data: [
            //   { value: 886, name: '发明授权' },
            //   { value: 2425, name: '发明申请' },
            //   { value: 118, name: '外观设计' },
            //   { value: 4223, name: '实用新型' }
            // ]
            data: this.pieSeriesTwo
          }
        ]
      }
      const pieChart = echarts.init(document.getElementById("pieChart2"));
      pieChart.setOption(pieOption);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        pieChart.resize();
      });

    },

    //条形图
    shadow() {
      let option = {
        title: {
          text: this.mingcheng + '专利申请趋势',
          textStyle: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {//X轴的设置
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.Bar2.yAxis
        },//Y轴的设置
        series: [//数据的设置
          {
            name: '',
            type: 'bar',//设置为柱状图
            data: this.Bar2.series
          }
        ]
      }
      const myChart = echarts.init(document.getElementById("shadowChart1"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });


    },

    shadowTwo() {
      let option = {
        title: {
          text: '全国儿童医院专利申请趋势',
          textStyle: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {//X轴的设置
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.Bar3.yAxis
        },//Y轴的设置
        series: [//数据的设置
          {
            name: '',
            type: 'bar',//设置为柱状图
            data: this.Bar3.series
          }
        ]
      }
      const myChart = echarts.init(document.getElementById("shadowChart2"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });


    },

    //第一列合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.pageSize === 0) {
          return {
            rowspan: this.pageSize,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },



    //
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getReport()
    },
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getReport()
    },

    //
    getReport() {
      var param = {
        "pageSize": this.pageSize,
        "pageIndex": this.currentPage,
      }
      this.$apiFun.getReport(param).then((res) => {
        //根据后端返回数据进行data的逻辑处理
        console.log(res)
        this.total = res.data.total
        this.tableData = res.data.rows
      })

    },


    //report柱状图、饼图
    report() {
      this.loading = true
      var param = {
        "danwei": this.userInfo.danwei
      }
      this.$apiFun.report(param).then((res) => {
        //根据后端返回数据进行data的逻辑处理
        this.categories = res.data.Bar1.categories
        this.colors = res.data.Bar1.colors
        this.barSeries = res.data.Bar1.series
        this.pieSeries = res.data.Pie1.series
        this.ban = res.data.Ban1.series[0]
        this.ban2 = res.data.Ban2.series[0]
        this.ban3 = res.data.Ban3.series
        this.ban4 = res.data.Ban4.series
        this.pieSeriesTwo = res.data.Pie2.series
        this.word = res.data.Cy1.series
        console.log(this.word)
        this.Bar2 = res.data.Bar2
        this.Bar3 = res.data.Bar3

        this.initEcharts()
        this.getOption()
        this.shadow()
        this.shadowTwo()
        this.getOptionTwo()
        setTimeout(() => {
          this.loading = false;
        }, 200);

      })
    },

    //统计图
    statistics(name) {
      this.jfName = name
      this.jfCurrentPage = 1
     
      var param = {
        "appKey": "c4d42996f1b29c98",
        "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
        "worksheetId": "6507fc1af74c7a63ac517a0b",
        "viewId": "6507fc1af74c7a63ac517a0c",
        "pageSize": this.jfSize,
        "pageIndex": this.jfCurrentPage,
        "listType": 0,
        "sortId": "",
        "isAsc": "",
        "filters": [
          {
            "controlId": "zlnfzt",
            "dataType": 11,
            "spliceType": 1,
            "filterType": 1,
            "value": name//ban4.name
          },
          {
            "controlId": "ssdw",
            "dataType": 2,
            "spliceType": 1,
            "filterType": 2,
            "value": this.userInfo.danwei//登录账号所属单位
          }
        ]
      }
      this.$apiFun.getStatistics(param).then((res) => {
        this.rowVisible = true
        console.log(res)
        this.rowTableData = res.data.rows
        this.jfTotal = res.data.total
      })


    },

    jfSizeChange(val) {
      this.jfSize = val
      this.statistics(this.jfName)
    },
    jfCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.jfCurrentPage = val
      this.statistics(this.jfName)
    },


    getStatistics(name){
      var that = this
      var param = {
          "appKey": "c4d42996f1b29c98",
          "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
          "worksheetId": "64dc89d71777cd57b6e251de",
          "viewId": "64dc89d71777cd57b6e251df",
          "pageSize": that.barSize,
          "pageIndex": that.barCurrentPage,
          "listType": 0,
          "sortId": "",
          "isAsc": "",
          "filters": [
            {
              "controlId": "ssdw",
              "dataType": 2,
              "spliceType": 1,
              "filterType": 1,
              "value": this.userInfo.danwei//登录账号所属单位
            },
            {
              "controlId": "fenji",
              "dataType": 2,
              "spliceType": 1,
              "filterType": 1,
              "value": name
            }
          ]
        }
        that.$apiFun.getStatistics(param).then((res) => {
          that.barTypeShow = true
          console.log(res)
          that.barTableData = res.data.rows
          that.barTotal = res.data.total
        })
    },

    barSizeChange(val) {
      this.barSize = val
      this.getStatistics(this.fenjiName)
    },
    barCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.barCurrentPage = val
      this.getStatistics(this.fenjiName)
    },
  }
}
</script>
<style lang="scss" scoped>
.about {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 65%;

    .ban3Box {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

  .right {
    width: 34%;

    .right_top {
      text-align: left;

      img {
        width: 160px;
        height: 80px;
      }

    }

    .br {
      width: 100%;
      height: 3px;
      background-color: #eaedf1;
      margin: 20px 0;
    }

    ul {
      li {
        line-height: 48px;
        cursor: pointer;

        a {
          color: #333;
          text-decoration: none;
        }
      }

      li:hover {
        color: #5470c6;

        a {
          color: #5470c6;
          text-decoration: none;
        }
      }
    }
  }



}

.bottom {
  width: 100%;
  height: 180px;

  background-color: #fff;
  line-height: 100px;
}

.el-row {
  margin-bottom: 20px;

}

.box-card {
  height: 140px;
  line-height: 40px;
}

.name {
  // line-height: 40px;
}
</style>